<template>
  <div class="users">
    <el-table :data="data" style="width: 100%">
      <el-table-column label="头像" width="80">
        <template slot-scope="scope">
          <!-- <i class="el-icon-time"></i> -->
          <el-avatar :src="baseUrl + scope.row.avatar"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column label="用户名" width="80">
        <template slot-scope="scope">
          <p>{{ scope.row.userName }}</p>
        </template>
      </el-table-column>
      <el-table-column label="昵称" width="80">
        <template slot-scope="scope">
          <p>{{ scope.row.nickName }}</p>
        </template>
      </el-table-column>
      <el-table-column label="邮箱" width="180">
        <template slot-scope="scope">
          <p>{{ scope.row.email }}</p>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="180">
        <template slot-scope="scope">
          <p>{{ scope.row.createDate }}</p>
        </template>
      </el-table-column>
      <el-table-column label="性别" width="50">
        <template slot-scope="scope">
          <p>{{ scope.row.gender ? "男" : "女" }}</p>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search"
            size="large"
            @input="changeSearch($event, scope.$index)"
            placeholder="输入关键字搜索"
          />
        </template>
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="修改信息"
      top="0"
      :visible.sync="centerDialogVisible"
      width="50%"
      center
      v-if="centerDialogVisible"
      destroy-on-close
    >
      <UserForm ref="user" :data="current" @imgChange="getFile" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="edit">修 改</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import UserForm from "./UserForm";
export default {
  name: "Users",
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      data: [],
      centerDialogVisible: false,
      file: "",
      current: "",
      search: "",
      timer: "",
    };
  },
  computed: {},
  watch: {},

  methods: {
    changeSearch(x, y) {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        // console.log(x);
        this.axios
          .get("/api/v1/users", {
            params: {
              key: x,
            },
          })
          .then((res) => {
            console.log(res);
            this.data = res.data;
          });
      }, 300);
    },
    edit() {
      // console.log(this.$refs.user.ruleForm);
      // console.log(this.file);
      let formdata = new FormData();
      let { email, gender, nickName, passWord, phone, userName, state, role } =
        this.$refs.user.ruleForm;
      let data = {
        role,
        email,
        gender,
        nickName,
        passWord,
        phone,
        userName,
        state,
      };
      console.log(data);
      for (let i in data) {
        formdata.append(i, data[i]);
      }
      formdata.append("avatar", this.file);
      formdata.append("editID", this.current._id);
      this.axios({
        method: "put",
        url: "/api/v1/users/editad",
        data: formdata,
        headers: {
          "Content-Type": "multipart/form-data",
        },
      }).then((res) => {
        // console.log(res);
        if (res.code == 1) {
          // console.log(this.index);
          this.centerDialogVisible = false;
          this.msg(res, this);
          this.data.splice(this.index, 1, res.data);
          this.data = JSON.parse(JSON.stringify(this.data));
        }
      });
    },
    getFile(file) {
      this.file = file;
    },
    handleEdit(index, row) {
      // console.log(index, row);
      this.current = row;
      this.index = index;
      this.centerDialogVisible = true;
    },
    handleDelete(index, row) {
      console.log(index, row);
      let uid = row._id;
      this.$confirm("确定要删除吗", "警告", {
        type: "error",
        confirmButtonText: "删除",
        closeOnClickModal: false,
      }).then(() => {
        this.axios({
          method: "delete",
          url: "/api/v1/users/del",
          data: { uid },
        })
          .then((res) => {
            // console.log(res, "删除");
            if (res.code == 1) {
              this.msg(res, this);
              this.data.splice(this.index, 1);
              this.data = JSON.parse(JSON.stringify(this.data));
            }
          })
          .catch((err) => {
            console.log(err);
          });
      });
    },
  },
  created() {
    this.axios.get("/api/v1/users").then((res) => {
      // console.log(res);
      this.data = res.data;
    });
  },
  mounted() {},
  components: { UserForm },
};
</script>
<style scoped>
</style>